<div data-role="view" data-title="Maybanhang.Net" id="order-list" data-layout="mobile-view" data-init="initOrderList">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>            
            <ul id="list-order">                
                
            </ul>
        </li>        
    </ul>
    <footer data-role="footer">
    	<div class="search-container">         	
         	<div style="height: 2px;"></div>
            <input type="text" class="search-text" placeholder="Tìm kiếm đơn hàng" id="order_text_search"/>
            <a data-role="button" data-icon="search" data-click="orderSearch"></a>
            <a data-role="button" data-icon="history" data-click="resetOrderSearch" id="order_reset_search"></a>
        </div>
    </footer>
    <script>
    	function orderSearch()
    	{
    		var text = $.trim($("#order_text_search").val());
    		 if (text !="")
    		 {    		 	
    		 	//$("#product_reset_search").show();
    		 }
    		 initOrderList();
    	}
    	function resetOrderSearch()
    	{
    		 var text = $.trim($("#order_text_search").val());
    		 if (text !="")
    		 {
    		 	$("#order_text_search").val("");
    		 	//$("#product_reset_search").hide();
    		 	initOrderList();
    		 	
    		 }
    	}
    	
    	<?php			
			//$firstDayOfTheMonth = strtotime('first day of this month');
			$beginTime = strtotime('first day of March 2010');
			$dtStrBeginTime = date("c", $beginTime);
			$dateBegin = new DateTime($dtStrBeginTime);
			$today = new DateTime();
			echo 'var begin = '.date_format($dateBegin, 'Ymd').';';
			echo 'var today = '.date_format($today, 'Ymd').';';			
		?>
		
    	function initOrderList()
    	{
    		app.showLoading();
    		pageNumber = 0;
    		
    		var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: {
                        url: "service/order", 
                        dataType: "json" 
                    },
                    parameterMap: function(options) {
	                    options = {	                        
	                        size: options.pageSize,
	                        from: begin,
	                        to:today
	                    };
	                    if (paged) {	                        
	                         paged = false;
	                    }
	                    else
	                    {
	                    	pageNumber = 0;
	                    }
	                    options["page"] = pageNumber;
	                    options["keyword"] = $("#order_text_search").val();
	                    return options;
	                }
                },
                schema: { // describe the result format
                    parse: function(response) {
	                    pageNumber = pageNumber +1;
                   		app.hideLoading();
	                    return response;
	                },
                    // the data which the data source will be bound to is in the "results" field
                    data: function(data) {
                        return data || [];
                    },
                    total: function() { return 10000; }
                }
            });
			paged = false;
	        $("#list-order").kendoMobileListView({
	            dataSource: dataSource,
	            pullToRefresh: true,
	            appendOnRefresh: false,
	            endlessScroll: true,
	            endlessScrollParameters: function() {	            	
	                paged = true;
	            },
	            template: list_order_item_template
	        });
    	}
    </script>
</div>